<template>
  <div class="doc_idea_page">
    <div class="page_header">
      <div class="header_title">
        <svg-icon icon-class="doc1" class="icon"></svg-icon>
        <span class="title1">文档中心</span>
      </div>
      <div class="header_close" @click="closeDocIdeaDrawer">
        <el-icon><Close /></el-icon>
      </div>
    </div>
    <!-- 搜索和按钮 -->
    <div class="page_search">
      <el-input v-model="searchString" size="small" placeholder="请输入文档标题"
        @keyup.enter.native="searchInputEnter"></el-input>
      <el-upload class="upload-demo" multiple :limit="1" :show-file-list="false" :action="actionUploadUrl"
        :on-exceed="handleExceed" :on-error="handleOnError_upload" :on-success="handleOnSuccess_upload"
        :before-upload="beforeUpload_upload" :headers="uploadHeader" :data="uploadDatas" :file-list="fileList">
        <el-button class="uploadBtn" size="small" plain v-if="typeActive != ''">上传</el-button>
      </el-upload>
    </div>
    <!-- 赛选 -->
    <div class="page_tabs">
      <div class="classify_text" :class="[typeActive == '' ? 'text_active' : '']" @click="classifyClick('')">全部</div>
      <div class="classify_text" :class="[typeActive == value.fileType.id ? 'text_active' : '']"
        v-for="(value, key) of typeList" :key="key" @click="classifyClick(value)">
        {{ value.fileType.typeName }}
      </div>
    </div>
    <!-- 列表 -->
    <div class="page_table">
      <el-table v-loading="pageLoading" ref="multipleTableRefs" :data="tableData" :show-header="false"
        tooltip-effect="dark" style="width: 100%" @select="rowSelect" @selection-change="selectionChange">
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column>
          <template #default="{ scope }">
            <div style="display: flex;align-items:center;">
              <div class="">
                <svg-icon :icon-class="selectSvgIcons(scope.row)"
                  style="font-size: 30px; vertical-align: middle; margin-right: 6px"></svg-icon>
              </div>
              <div>
                <div class="realName_class">
                  <el-tooltip class="item" effect="dark" :content="scope.row.fileName" placement="top-start">
                    <span>{{ scope.row.fileName }}</span>
                  </el-tooltip>
                </div>
                <div>
                  <span>{{ $moment(scope.row.createTime).format("YYYY-MM-DD") }} {{
                    proxy?.$yuUtils.filterSizeUnit(scope.row.sizeBytes)}}</span>
                  <i class="el-icon-download icon_downlod" @click.stop="downloadClick(scope.row)"></i>
                  <i class="el-icon-delete icon_delete" @click.stop="deleteClick(scope.row)"></i>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" layout="prev, pager, next" :hide-on-single-page="requestStr.pageCount <= 1"
        :pager-count="5" :total="requestStr.total" :current-page="requestStr.page" :page-size="requestStr.size"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- v-if="multipleSelection.length != 0" -->
    <div  class="doc_tool">
      <div class="header_title">
        <svg-icon icon-class="dangan" class="iconTitle" />
        <span class="title1">文档操作</span>
      </div>
      <div class="doc_tool_box">
        <div class="item_tool">
          <svg-icon icon-class="fanyi1" class="icon_size " />
          <div class="text">文档翻译</div>
        </div>
        <div class="item_tool" @click="docToolClick('ContentSummary')">
          <svg-icon icon-class="digest" class="icon_size " />
          <div class="text">内容总结</div>
        </div>
        <div class="item_tool">
          <svg-icon icon-class="image" class="icon_size " />
          <div class="text">图像理解</div>
        </div>
        <div class="item_tool">
          <svg-icon icon-class="ocr" class="icon_size " />
          <div class="text">OCR</div>
        </div>
        <div class="item_tool">
          <svg-icon icon-class="ppt1" class="icon_size " />
          <div class="text">PPT生成</div>
        </div>
        <div class="item_tool">
          <svg-icon icon-class="excel2" class="icon_size " />
          <div class="text">Excel分析</div>
        </div>
        <div class="item_tool">
          <svg-icon icon-class="chat_text" class="icon_size " />
          <div class="text">更多问答</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user';
import { getToken } from '@/utils/auth';

const { proxy } = getCurrentInstance() as any;

const pageLoading = ref(false)
const searchString = ref('')
const tableData = ref([])
const typeList:any = ref({})
const multipleSelection = ref([])
const requestStr = ref({
  page: 1,
  size: 20,
  total: 0,
  pageCount: 0
})
const typeActive = ref('')
const fileList = ref([])
const uploadHeader: any = ref({})
const actionUploadUrl = ref('')
const uploadDatas: any = ref({})
const userStore = useUserStore();
const multipleTableRefs = ref()

const emit = defineEmits(['closeDocIdeaDrawer', 'docToolClick']);
const getTableList = () => {
  // pageLoading.value = true;
  // docIdeaDrawerApi
  //   .apiChatFiles({
  //     createId: userStore.userId,
  //     fileName: searchString.value,
  //     page: requestStr.value.page,
  //     size: requestStr.value.size,
  //     categoryId: typeActive.value
  //   })
  //   .then((res:any) => {
  //     pageLoading.value = false;
  //     tableData.value = res.obj.content;
  //     requestStr.value.total = res.obj.totalElements;
  //     requestStr.value.pageCount = Math.ceil(requestStr.value.total / requestStr.value.size);
  //   })
  //   .catch((err) => {
  //     pageLoading.value = false;
  //   });
}
// 获取分类列表
const getTypeList = () => {
  // docIdeaDrawerApi.apiChatFilesType().then((res:any) => {
  //   typeList.value = res.obj;
  // });
}
// 点击分类
const classifyClick = (val: any) => {
  val == "" ? (typeActive.value = "") : (typeActive.value = val.fileType.id);
  getTableList();
}
// 搜索
const searchInputEnter = () => {
  requestStr.value.page = 1;
  getTableList();
}

const selectSvgIcons = (v: any) => {
  v.suffix = v.extension;
  return proxy.$yuUtils.selectSvgIcon(v);
}
// handleSelectionChange(val) {
//   this.multipleSelection = val;
// },
/** 表格单选选中事件------start */
const rowSelect = (selection: any, row: any) => {
  multipleSelection.value = [];
  multipleTableRefs.value.clearSelection();
  if (selection.length == 0) return;
  multipleTableRefs.value.toggleRowSelection(row, true);
  multipleSelection.value.push(row);
}
const selectionChange = (val: any) => {
  // this.multipleSelection = val;
}
/** 表格单选选中事件------end */
// 分页
const handleCurrentChange = (val: any) => {
  requestStr.value.page = val;
  getTableList();
}
const closeDocIdeaDrawer = () => {
  emit("closeDocIdeaDrawer");
}
/**上传------------------- */
const handleExceed = (files: any, fileList: any) => {
  proxy.$modal.msgWarning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}
// 上传文件之前的钩子--额外的请求参数
const beforeUpload_upload = (file: any) => {
  uploadDatas.value.category_id = typeActive.value;
}
// 上传成功
const handleOnSuccess_upload = (response: any, file: any, fileList: any) => {
  proxy.$modal.msgSuccess("操作成功");
  fileList.value = [];
  handleCurrentChange(1);
}
// 上传失败
const handleOnError_upload = (err: any, file: any, fileList: any) => {
  proxy.$modal.msgError(JSON.parse(err.message).message);
  fileList.value = [];
}
// 文档操作
const docToolClick = (val: any) => {
  if (multipleSelection.value[0].extension == "pdf") {
    emit("docToolClick", val, multipleSelection.value);
    multipleSelection.value = [];
    multipleTableRefs.value.clearSelection();
  } else {
    proxy.$modal.msgWarning("请选择pdf文件");
  }
}
// 下载文件
const downloadClick = (item: any) => {
  // docIdeaDrawerApi.apiChatFilesDownload(item.id).then(res => {
  //   downloadFileName(res, item.fileName)
  // })
}
// 删除文件
const deleteClick = (item: any) => {
  // proxy.$modal.confirm('确定删除该文件吗？').then(() => {
  // })
  //   .then(() => {
  //     docIdeaDrawerApi
  //       .apiChatFilesDelete(item.id).then(res => {
  //         proxy.$modal.msgSuccess("操作成功");
  //         getTableList();
  //       })
  //   })
}

onMounted(() => {
  uploadHeader.value.Authorization = getToken();
  actionUploadUrl.value = import.meta.env.VITE_APP_BASE_API + "/api/chatFiles";
  getTableList();
  getTypeList();
})
</script>


<style scoped lang='scss'>
// 文字几行隐藏
@mixin textOverflow($clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $clamp; //元素几行显示
  -webkit-box-orient: vertical;
}

.doc_idea_page {
  height: 100vh;
  overflow-y: auto;

  .page_header {
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header_title {
      display: flex;
      align-items: center;

      .icon {
        font-size: 30px;
        margin-right: 4px;
      }

      .title1 {
        font-size: 15px;
      }
    }

    .header_close {
      cursor: pointer;
    }
  }

  .page_search {
    display: flex;
    align-items: center;
    padding: 0 20px;

    .uploadBtn {
      border-color: #3662ec;
      color: #3662ec;
      margin-left: 10px;
    }
  }

  .page_tabs {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 0 20px;

    .classify_text {
      padding: 3px 6px;
      border-radius: 3px;
      font-size: 12px;
      color: #818284;
      background-color: #f5f5f6;
      margin-bottom: 8px;
      margin-right: 8px;
      border: 1px solid #f5f5f6;
      cursor: pointer;
    }

    .text_active {
      color: #3662ec;
      border-color: #3662ec;
    }

    .classify_text:hover {
      @extend .text_active;
    }
  }

  .page_table {
    height: calc(100vh - 360px);
    overflow-y: auto;

    .el-table ::v-deep td.el-table__cell {
      border-color: #fff !important;
    }

    .el-table::before {
      background-color: #fff;
    }
  }

  .doc_tool {
    padding: 12px;

    .header_title {
      display: flex;
      align-items: center;

      .iconTitle {
        margin-right: 5px;
        font-size: 18px;
      }

      .title1 {
        font-size: 14px;
        font-weight: bold;
        color: #757679;
      }
    }

    .doc_tool_box {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;

      .item_tool {
        text-align: center;
        color: #acb0bd;
        cursor: pointer;

        &:hover {
          // background-color: #d8d8d8;
          color: #818284;
        }

        .icon_size {
          font-size: 20px;
          // color: #818284;
        }

        .text {
          margin-top: 4px;
          font-size: 12px;
        }
      }
    }
  }

  .realName_class {
    width: 210px;
    @include textOverflow(1);
  }

  .icon_downlod {
    cursor: pointer;
    margin-left: 10px;

    &:hover {
      color: #3662ec;
    }
  }

  .icon_delete {
    cursor: pointer;
    margin-left: 10px;

    &:hover {
      color: #F56C6C;
    }
  }
}
</style>